<template>
	<m-layout title="我要反馈">
		<text slot="right" style="font-size: 28rpx;color: #FA2B47;" @click="Jump('/pages/mine/feedback/feedback')">反馈记录</text>
		<m-block spa="24" gap="40 30">
			<!-- 		<view class="top">
				<view class="flex-between">
					<view>反馈类型</view>
					<radio-group @change="typeChange" class="flex">
						<view class="flex">
							<text class="text">意见</text>
							<radio style="transform: scale(0.9)" :checked="feedbackType == 1" color="#FA2B47"
								value="1" />
						</view>
						<view class="flex">
							<text class="text">建议</text>
							<radio style="transform: scale(0.9)" :checked="feedbackType == 2" color="#FA2B47"
								value="2" />
						</view>
					</radio-group>
				</view>
				<view class="flex-between" style="margin-top: 40rpx;">
					<view>反馈方面</view>
					<picker @change="bindPickerChange" :value="feedbackAspectIndex" range-key="feedbackAspectName"
						:range="aspectList">
						<view class="picker_text flex">
							<view style="margin-right: 12rpx;">{{feedbackAspect}}</view>
							<m-icon size="10" color="#bfbfbf"
								type="icon-zelvxuanzefeiyongdaosanjiaoxingfandui"></m-icon>
						</view>
					</picker>
				</view>
			</view> -->
			<view class="feedback_box">
				<view class="flex" style="align-items: flex-start;">
					<textarea style="margin-left: 5rpx;" v-model="feedbackContent" @input="changeContent"
						placeholder-class="placeholder" placeholder="请详细描述您的问题，上传截图更快解决" />
				</view>
				<view style="margin-bottom: 22rpx;">已写<text style="color: #FA2B47;">{{contentLength}}</text>个字</view>
				<uploadPhoto ref="uploadPhoto" v-model="imgList"></uploadPhoto>
			</view>
		</m-block>
		<m-block gap="24" bgColor="unset" >
			<m-button class="ptb-20"  @click="submit">确定</m-button>
		</m-block>
	</m-layout>
</template>

<script>
	// import { AddUserFeedback } from "@/api/userApi.js" // 引入接口
	// import { OpinionFeedbackList,SuggestFeedbackList } from "@/api/public.js"
	import { MsgFeedback_SendMsg } from "@/api/msg.js"
	export default {
		data() {
			return {
				// feedbackType: 1,
				// aspectList: [],
				// feedbackAspectIndex: 0,
				// feedbackAspect: "请选择",
				feedbackContent: "",
				imgList: [],
				contentLength: 0
			};
		},
		onShow() {
			// this.getAspectList();
		},
		methods: {
			///////////////////////////////////// 事件监听 ////////////////////////////////////////
			// 反馈类型监听
			// typeChange(val) {
			// 	this.feedbackType = val.detail.value
			// 	this.feedbackAspectIndex = 0;
			// 	this.getAspectList();
			// },
			// // 反馈方面监听
			// bindPickerChange(e) {
			// 	this.feedbackAspectIndex = e.detail.value;
			// 	this.feedbackAspect = this.aspectList[this.feedbackAspectIndex].feedbackAspectName;
			// },
			// 内容监听
			changeContent(e) {
				this.contentLength = e.detail.cursor;
				this.feedbackContent = e.detail.value;
			},
			///////////////////////////////////// 网络请求 ////////////////////////////////////////
			// 获取反馈方面列表
			// async getAspectList() {
			// 	let res;
			// 	if (this.feedbackType == 1) {
			// 		res = await OpinionFeedbackList();
			// 	} else if (this.feedbackType == 2) {
			// 		res = await SuggestFeedbackList();
			// 	}

			// 	const { success, data } = res;
			// 	console.log(data);
			// 	if (success) {
			// 		this.aspectList = data;
			// 		this.feedbackAspect = this.aspectList[0].feedbackAspectName;
			// 	}
			// },
			// 提交
			async submit() {
				// return this.openURL()
				if (!this.feedbackContent) return this.Toast('请输入反馈内容')
				let sendData = {
					content: this.feedbackContent,
					imgList: this.imgList
				}
				const { success, msg } = await MsgFeedback_SendMsg({
					content: JSON.stringify(sendData)
				});
				this.Toast(msg)
				if (!success) return
				this.feedbackContent = '';
				this.imgList = [];
				this.$refs.uploadPhoto.initData()
			},

		}
	}
</script>

<style lang="scss">
	.top {
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 34rpx;
		margin-bottom: 40rpx;

		.text {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin: 0 17rpx 0 32rpx;
		}

		.picker_text {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-right: 10rpx;
		}
	}

	.feedback_box {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;

		.placeholder {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.feedback_img_no {
			background: #F6F6F6;
			border-radius: 24rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			padding: 44rpx 0;
			margin-top: 22rpx;
		}
	}
</style>